<template>
	<view class="bgcolor">
		<view class="renDitelTop">
			<image src="../../static/images/pic69.png"></image>
			<view @tap="handleInfo"><text class="lg cuIcon-back"></text></view>
		</view>
		<view class="cu-bar bg-white solid-bottom solid-bottom flex justify-between zxNav">
			<view>
				<view class="flex justify-between works-top">
					<view class="flex justify-around title">
						<text>包图装饰</text>
					</view>
				</view>
				<view class="works-anli">
					<text>案例：</text>
					<text>204</text>
					<text class="padding-left">工地：</text>
					<text>204</text>
				</view>
				<view class="flex works-gz padding">
					<view>先施工后付款</view>
					<view>免息分期</view>
				</view>
			</view>
			<view>
				<h3><text>4.6分</text></h3>
				<p class="padding-top padding-bottom">6992条评论<text class="lg cuIcon-right"></text></p>
				<view>
					<image src="../../static/images/pic80-1.png" v-for="(item,index) in 5" :key=index></image>
				</view>
			</view>
		</view>
		<view class="cu-list menu-avatar address">
			<view class="cu-item flex justify-between">
				<view>
					<text class="lg cuIcon-location padding-right"></text>
					包图市包图区8号
				</view>
				<view><image src="../../static/images/phone1-1.png"></image></view>
			</view>
		</view>
		<view class="flex justify-between padding-left padding-right serve">
			<view>特色服务</view>
			<view class="my-ellipsis">免费规划设计 免费预算报价 免费全屋设计免费规划设计 免费预算报价 免费全屋设计</view>
			<view><text class="lg cuIcon-right"></text></view>
		</view>
		<view class="information">
			<h3>优惠信息</h3>
			<view class="margin-bottom">
				<view>
					<image src="../../static/images/pic84.png"></image>
					<view>
						<text>￥</text>
						<text>200</text>
					</view>
				</view>
				<view>
					<image src="../../static/images/pic333.png"></image>
					<view class="flex justify-between">
						<view>
							<view>
								<text>店铺券</text>
								<text>限建材使用</text>
							</view>
							<p class="padtop">满2999元可用</p>
						</view>
						<view>免费领</view>
					</view>
				</view>
			</view>
			<view>
				<view>
					<image src="../../static/images/pic84.png"></image>
					<view>
						<text>￥</text>
						<text>200</text>
					</view>
				</view>
				<view>
					<image src="../../static/images/pic333.png"></image>
					<view class="flex justify-between">
						<view>
							<view>
								<text>店铺券</text>
								<text>限建材使用</text>
							</view>
							<p class="padtop">满3999元可用</p>
						</view>
						<view>免费领</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zxanli">
			<h3>装修案例</h3>
			<scroll-view class="scroll-view_H flex" :scroll-x='true'>
				<view class="b">
					<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item,index) in list" :key=index>
						<view>
							<view><image :src=item.url></image></view>
							<p class="my-ellipsis">{{item.name}}</p>
							<view>220m<sup>2</sup>/四居及以上/现代简约</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="rplun">
			<h3>签约业主评论</h3>
			<view class="borline" v-for="(item,index) in pLlist" :key=index>
				<view class="cu-list menu-avatar ">
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="'background-image:url('+item.url+');'"></view>
						<view class="content">
							<view class="text-grey">凯尔</view>
							<view class="text-gray text-sm ">
								<view class="text-cut">
									<view class="flex">
										施工<view><image class="myStar" src="../../static/images/pic80-1.png" v-for="(item,index) in 6" :key=index></image></view>
										<text class="padding-left">服务</text><view><image class="myStar" src="../../static/images/pic80-1.png" v-for="(item,index) in 6" :key=index></image></view>
									</view>
									<view>装修公司不错，项目经理认真仔细</view>
								</view> 
							</view>
						</view>
						<view class="action">
							<view class="text-grey text-xs">1天前</view>
							<view class="cu-tag bg-grey sm">竣工</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="text-center padding-bottom more">更多评论<text class="lg cuIcon-right"></text></view>
		<view class="flex justify-around footer">
			<view>
				<image src="../../static/images/phone1.png"></image>
				<view>电话</view>
			</view>
			<view>
				<image src="../../static/images/pic38.png"></image>
				<view>客服</view>
			</view>
			<text>免费预约</text>
			<text class="bg-cyan">免费报价</text>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				list:[
					{
						url:'../../static/images/pic49.png',
						name:'随意中带着各种小心意'
					},
					{
						url:'../../static/images/pic48.png',
						name:'随意中带着各种小心意'
					},
					{
						url:'../../static/images/pic58.png',
						name:'随意中带着各种小心意'
					},
					{
						url:'../../static/images/pic89.png',
						name:'随意中带着各种小心意'
					}
				],
				pLlist:[
					{
						url:'../../static/images/pic12.png',
						name:'',
						num:'',
					},
					{
						url:'../../static/images/pic13.png',
						name:'',
						num:'',
					},
					{
						url:'../../static/images/pic14.png',
						name:'',
						num:'',
					},{
						url:'../../static/images/pic15.png',
						name:'',
						num:'',
					},{
						url:'../../static/images/pic16.png',
						name:'',
						num:'',
					},{
						url:'../../static/images/pic17.png',
						name:'',
						num:'',
					}
				]
				
			}
		},
		methods:{
			handleInfo(){
				uni.navigateTo({
					url:'/pages/index/renovate'
				})
			}
		}
	}
</script>

<style lang="scss">
.bgcolor{
	background: #f2f4f7;
}
.renDitelTop{
	width: 100%;
	position: relative;
	>image{
		width: 100%;
	}
	>view{
		position: absolute;
		top: 30upx;
		left: 30upx;
		height: 60upx;
		line-height:60upx;
		width: 60upx;
		border-radius: 50%;
		background:rgba(222,222,222,.5) ;
		text-align: center;
	}
}
.zxNav{
	position: relative;
	padding: 30upx 20upx;
	top: -50upx;
	overflow: hidden;
	border-bottom: 1px solid #f4f4f4;
	border-radius: 48upx 48upx 0 0;
	.works-top{
		width: 100%;
		background: #fff;
		>.title{
			>text{
				padding: 0 15upx;
				font-family: cursive;
				font-weight: bolder;
				font-size: 48upx;
				margin-top: 10upx;
			}
			>view:nth-of-type(2){
				width: 40upx;
				height: 26upx;
				text-align: center;
				font-size: 16upx;
				color: #fff;
				background: #ff6464;
				margin-top: 14upx;
			}
		}
		>view:nth-of-type(2){
			color:#b7b7b7 ;
		}
	}
	.works-anli{
		padding: 20upx;
		color: #b7b7b7;
		background: #fff;
	}
	.works-gz{
		background: #fff;
		font-size: smaller;
		padding: 20upx;
		>view:nth-of-type(1){
			color: #7eb3ff;
			border: 1px solid #7eb3ff;
			padding: 5upx;
			margin-right: 20upx;
		}
		>view:nth-of-type(2){
			color: #ffae5d;
			border: 1px solid #ffae5d;
			padding: 5upx;
		}
	}
	>view:nth-of-type(2){
		color: #ff8b19;
		border-left:1px solid #f4f4f4 ;
		padding-left: 100upx;
		image{
			width: 20upx;
			height: 20upx;
		}
	}
}
.address{
	border-bottom: 1px solid #f4f4f4;
	position: relative;
	top: -50upx;
	.cu-item{
		justify-content: space-between;
		padding: 0 30upx;
		view:nth-of-type(2){
			width: 150upx;
			height: 80upx;
			border-left: 1px solid #f4f4f4;
			padding-left: 48upx;
			image{
				width: 40%;
				height: 70%;
				position: relative;
				top: 12upx;
				left: 40upx;

			}
		}
	}
}
.serve{
	border-bottom: 1px solid #f4f4f4;
	padding-bottom: 20upx;
	background: #fff;
	height: 96upx;
	padding-top: 28upx;
	position: relative;
	top: -28upx;
}
.information{//优惠券
	padding: 0 20upx 40upx;
	background: #fff;
	margin-bottom: 40upx;
	h3{
		padding: 20upx 0;
	}
	>view{
		display: flex;
		>view:nth-of-type(1){
			width: 30%;
			height: 120upx;
			position: relative;
			>image{
				width: 100%;
				height: 100%;
			}
			>view{
				position: absolute;
				top: 26upx;
				left: 40upx;
				color: #fff;
				text:nth-of-type(2){
					font-size: 70upx;
					font-weight: bolder;
				}
			}
		}
		.padtop{
			padding-top: 10upx;
		}
		>view:nth-of-type(2){
			width: 70%;
			height: 120upx;
			position: relative;
			>image{
				width: 100%;
				height: 100%;
			}
			>view{
				position: absolute;
				color: #ff664c;
				top: 20upx;
				width: 100%;
				padding: 0 40upx;
				>view:nth-of-type(2){
					width: 150upx;
					line-height: 44upx;
					height: 60upx;
					text-align: center;
					border: 1px solid #ff664c;
					padding: 8upx;
					position: relative;
					top: 14upx;
					color: #fff;
					font-weight: bolder;
					font-size: medium;
					background: #ff664c;
					border-radius: 30upx;
				}
			}
		}
	}
}
.zxanli{//装修案例
	background: #fff;
	padding: 30upx 20upx;
	h3{
		padding-bottom: 15upx;
	}
	.scroll-view_H{
		height: 400upx !important;
		// border: 1px solid;
		.b{
			width:1440upx;
			>view{
				// float: left;
				height: 380upx;
				width:320upx;
				display: inline-block;
				box-shadow: -2px 2px 6px #ccc;
				border-radius: 12upx;
				margin:20upx;
				.my-ellipsis{
					width: 260upx;
				}
				>view{
					width: 92%;
					height: 60%;
					margin:4%;
					text-align: center;
					>view:nth-of-type(1){
						width: 100%;
						height: 100%;
						margin: 0 auto;
						image{
							width: 100%;
							height: 100%;
						}
					}
					>p{
						padding: 10upx 0;
						margin: 20upx 0;
						font-size: inherit;
					}
					>view{
						color: #c5c5c1;
						font-size: smaller;
					}
				}
			}
		}	
	}
}
.rplun{
	background: #fff;
	margin: 30upx 0 0 0;
	padding: 30upx 20upx;
	>.borline{
		border-bottom: 1px solid #f4f4f4;
		padding: 20upx 0;
	}
	.myStar{
		width: 20upx;
		height: 20upx;
	}
	.cu-item:after{
		border-bottom: 0;
	}
}
.more{
	background: #fff;
	margin-bottom: 20upx;
	border-bottom: 1px solid #f4f4f4;
}
.footer{
	background: #fff;
	height: 130upx;
	padding: 30upx 0 20upx 0; 
	>text{
		width: 160upx;
		height: 60upx;
		border: 1px solid;
		line-height:60upx;
		text-align: center;
		position: relative;
		top: 10upx;
		border-radius: 30upx;
		background: #ff8c1a;
		font-weight: bolder;
		color: #fff;
	}
	>text.bg-cyan{
		background: #3388ff;
	}
	>view{
		text-align: center;
		image{
			width: 30upx;
			height: 30upx;
		}
	}
	
}
</style>
